<template>
	<view class="tmpl">
		<view class="profile-container">
			<view class="filter">
				<view class="filter-date">
					<view class="current-date" @click="filter_date()">
						{{ title_date }}
					</view>
					<view class="filter-date-list" v-show="is_filter_date">
					<view class="filter-date-item" v-for="(date, index) in list_date" @click="change_data(date)">
							<text>{{ date.date }}</text>
						</view>
					</view>
				</view>
				<view class="filter-class">
					<view class="current-class"><input type="text" class="uni-input filter-search"  placeholder="姓名查询" @input="filter_search" /></view>
					<view class="search-list" v-if="is_filter_nickname">
					<view v-for="(item, index) in list_member">
							<text @click="Search(item)">{{ item.nick_name }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="detail" :style="{ backgroundImage: `url(${indexBackgroundImage})`, backgroundSize: '100%', backgroundRepeat: 'no-repeat' }">
				<view @click="ReturnSelf">
					<view class="avatar" @click="ReturnSelf">
						<image src="../../static/image/test/avatar.png" mode="widthFix" />
					</view>
				</view>

				<view class="nickname">
					<text @click="ReturnSelf">{{ name }}</text>
				</view>

				<view class="total-list">
				<view class="total-item month-score">
										<view class="tital"><text>个人本月成绩</text></view>
										<view class="number">
											<text>{{ mouth_score }}</text>
										</view>
									</view>
									<view class="total-item month-score">
										<view class="tital"><text>个人总成绩</text></view>
										<view class="number">
											<text>{{ personal_score  }}</text>
										</view>
									</view>

					<view class="total-item month-order-number">
						<view class="tital"><text>个人本月排名</text></view>
						<view class="number">
							<text>{{ mouth_order }}</text>
							<!-- <text>-3</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="month-detail">
			<view class="month-title" @click="filter_date()">{{ title_date }}</view>
			<view class="month-title-c">
				<image src="../../static/image/kaohe-c-down.png" mode="widthFix" />
			</view>

			<view class="detail-list">
				<view v-for="(item, index) in list_summary">
					<view class="detail-item">
						<view class="detail-title" @click="toggle(index)">
							<text>{{ item.xmmc }}</text>
							<text>{{ item.zf }}</text>
						</view>

						<view class="detail-content-list" v-show="detail_content_list == index" v-for="_item in item.fl">
							<view class="detail-content-item">
								<text>{{ _item.fl }}</text>
								<text>[{{ _item.zf }}]</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="kaohe-list">
			<sl-filter :ref="'slFilter'" :menuList="menuList" @result="result"></sl-filter>
		</view>

		<view class="kaohe-detail">
			<view class="kaohe-detail-item" v-for="(item, index) in hidden">
				<view class="kaohe-detail-title">
					<view class="kaohe-detail-title-left">
						<text  class="class_name">{{index+1}}.</text>
						<text class="class_name">{{ item.dept_name }}</text>
						<text class="datetime">{{ item.nick_name }}</text>
					</view>
					<view class="kaohe-detail-title-right">
						<text>加减分：</text>
						<text>{{ item.fz }}</text>
					</view>
				</view>
				<view class="kaohe-detail-content">
					<text class="kaohe-date">{{ item.sj }}</text>
					<text>{{ item.ms }}</text>
				</view>
				<view class="kaohe-detail-content">{{ item.khnr }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue';
	import indexBackgroundImage from '../../static/image/kaohe-background.png';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				user:[],
				personal_score :'',
				indexBackgroundImage: indexBackgroundImage,
				search_mouse: '',
				name: '',
				deptId: '',
				khxmid: '',
				hidden: [],
				is_filter_date: false,
				is_filter_nickname: false,
				is_filter_class: false,
				list_summary: {},
				list_date: [],
				detail_content_list: 0,
				pageNum: 1,
				pageSize: 12,
				title_date: '',
				mouth_order: 0,
				mouth_score: 0,
				class_order: 0,
				class_score: 0,
				menuList: [{
						title: '其他班组',
						// 'detailTitle': '子标题1',
						// 'isMutiple': true,
						key: 'key_1',
						detailList: [{
							title: '全部',
							value: ''
						}]
					},
					{
						title: '分类',
						// 'detailTitle': '子标题2',
						key: 'key_2',
						isMutiple: false,
						detailList: [{
							title: '全部',
							value: ''
						}]
					}
				],
				query_user_name: '',
				query_nick_name: '',
				query_dept_id: '',
				list_member: []
			};
		},
		onLoad(query) {
			let _this = this;

			let myDate = new Date();
			let mouse = myDate.getMonth() + 1;
			let year = myDate.getFullYear();
			for (let i = 0; i < 12; i++) {
				let _mouse = mouse - i;
				if (_mouse <= 0) {
					year -= 1;
					_mouse = 12;
				}
				if (_mouse > 12) {
					_mouse = 1;
					year += 1;
				}
				if (_mouse < 10) {
					_mouse = '0' + _mouse;
				}
				let _date = {
					date: year + '年' + _mouse + '月',
					mouse: _mouse,
					search: year + '-' + _mouse
				};
				this.list_date.push(_date);
			}
			this.title_date = this.list_date[0].date;
		},
		onShow() {
			let is_login = uni.getStorageSync('user_token') ? true : false;
			this.pageNum = 1;
			if (!is_login) {
				uni.navigateTo({
					url: '../profile/user_login'
				});
			}
			this.getListDetailData();
			
			
			
			

			let _this = this
			_this.menuList[0].detailList = [{
				title: '全部',
				value: ''
			}]
			this.query_user_name = uni.getStorageSync('query_user_name');
			this.query_nick_name = uni.getStorageSync('query_nick_name');
			this.query_dept_id = uni.getStorageSync('query_dept_id');
			
			
			this.user = uni.getStorageSync('user');
			
			
			// 班组列表
			this.$api.team({}).then(res => {
				for (let i = 0; i < res.data.data.length; i++) {
					let obj = res.data.data[i];
					let dept_name = obj['dept_name']; // 名称
					let dept_id = obj['dept_id']; //  ID
					let data = {
						title: dept_name,
						value: dept_id
					};
					_this.menuList[0].detailList.push(data);
				}
			});
			_this.menuList[1].detailList = [{
				title: '全部',
				value: ''
			}]
			//考核项目
			this.$api.project({}).then(res => {
				for (let i = 0; i < res.data.data.length; i++) {
					let obj = res.data.data[i];
					let dept_name = obj['xmmc']; // 名称
					let dept_id = obj['xmid']; //  ID
					let data = {
						title: dept_name,
						value: dept_id
					};
					_this.menuList[1].detailList.push(data);
				}
			});
			let post_data = {
				deptId: this.query_dept_id,
				userName: this.query_user_name,
				khyf: this.search_mouse
			};
			// console.log(post_data)
			//  班组排名
			this.$api.getBzndzf(post_data).then(res => {
				this.class_score = res.data.data[0].zf;
			});
			this.$api.getGrndzf(
					post_data	
					).then(res =>{
						console.log(res.data.data[0])
						
						if(res.data.data[0] == null){
							this.personal_score = 0
						}else{
							this.personal_score = res.data.data[0].zf
						}
						console.log(this.personal_score)
						//console.log(this.personal_score)
						// console.log(res)
					})

			//个人月度排名，个人月度分
			this.$api.getGrpm(post_data).then(res => {
				console.log("个人月度排名")
				console.log(res)
				console.log(res.data.data.bss)
				this.mouth_score=res.data.data.bss;
				this.mouth_order = res.data.data.bzpms;
			});

			this.name = this.query_nick_name;
			//  班组排名
			this.$api.getGrndzf(
					post_data	
					).then(res =>{
						console.log(res.data.data[0])
						
						if(res.data.data[0] == null){
							this.personal_score = 0
						}else{
							this.personal_score = res.data.data[0].zf
						}
						console.log(this.personal_score)
						
					})

			this.$api
				.assessment({
					khyf: this.search_mouse,
					userName: this.query_user_name
				})
				.then(res => {
					this.list_summary = res.data.data;
					// console.log(this.list_summary);
				});
		},

		methods: {
			ReturnSelf() {
				console.log(uni.getStorageSync('user'))
				uni.setStorageSync('query_user_name', uni.getStorageSync('user')['userName']);
				uni.setStorageSync('query_nick_name', uni.getStorageSync('user')['nickName']);
				uni.setStorageSync('query_dept_id', uni.getStorageSync('user')['deptId']);

				this.query_dept_id = uni.getStorageSync('user')['deptId']
				this.query_user_name = uni.getStorageSync('user')['userName']

				let post_data = {
					deptId: this.query_dept_id,
					userName: this.query_user_name,
					khyf: this.search_mouse
				};
				// console.log(post_data)
				this.is_filter_nickname = false
				//  班组排名
		this.$api.getGrndzf(
				post_data	
				).then(res =>{
					console.log(res.data.data[0])
					
					if(res.data.data[0] == null){
						this.personal_score = 0
					}else{
						this.personal_score = res.data.data[0].zf
					}
					console.log(this.personal_score)
					//console.log(this.personal_score)
					// console.log(res)
				})
				
			

				this.name = uni.getStorageSync('user')['nickName'];
				this.$api.getGrpm(post_data).then(res => {
					console.log("个人月度排名")
					console.log(res)
					console.log(res.data.data.bss)
					this.mouth_score=res.data.data.bss;
					this.mouth_order = res.data.data.bzpms;
				});
				
				//  班组排名
		this.$api.getGrndzf(
				post_data	
				).then(res =>{
					console.log(res.data.data[0])
					
					if(res.data.data[0] == null){
						this.personal_score = 0
					}else{
						this.personal_score = res.data.data[0].zf
					}
					console.log(this.personal_score)
					//console.log(this.personal_score)
					// console.log(res)
				})
				this.$api
					.assessment({
						khyf: this.search_mouse,
						userName: this.query_user_name
					})
					.then(res => {
						this.list_summary = res.data.data;
						// console.log(this.list_summary);
					});
			},
			change_data(date) {
				// console.log(date);
				this.search_mouse = date.search;
				this.$api
					.assessment({
						khyf: this.search_mouse
					})
					.then(res => {
						this.list_summary = res.data.data;
						// console.log(this.list_summary);
					});
				this.is_filter_date = false;
				this.title_date = date.date;
			},
			filter_search(data) {
				let val = data.detail.value;
				if (val.length > 0) {
					this.is_filter_nickname = true;
					let _this = this;
					this.$api
						.getUserList({
							nickName: val
						})
						.then(res => {
							_this.list_member = res.data.data;
						});
					console.log(_this.list_member);
				} else {
					this.is_filter_nickname = false;
				}
			},
			result(value) {
				this.deptId = value['key_1'];
				this.khxmid = value['key_2'];
				this.pageNum = 1;
				this.getListDetailData();
			},
			getListDetailData() {
				let _this = this;
				let data = {
					pageNum: _this.pageNum,
					pageSize: _this.pageSize,
					deptId: _this.deptId,
					khxmid: _this.khxmid
				};
				this.$api.points(data).then(res => {
					console.log(res)
					_this.hidden = res.data.rows;

					// console.log(res);
				});
			},
			toggle(index) {
				if (this.detail_content_list == index) {
					this.detail_content_list = -1
				} else {
					this.detail_content_list = index;
				}
			},
			filter_date() {
				if (this.is_filter_class) this.is_filter_class = !this.is_filter_class;
				this.is_filter_date = !this.is_filter_date;
			},
			Search(person) {
				uni.setStorageSync('query_user_name', person.user_name);
				uni.setStorageSync('query_nick_name', person.nick_name);
				uni.setStorageSync('query_dept_id', person.dept_id);
				this.query_user_name = uni.getStorageSync('query_user_name');
				this.query_nick_name = uni.getStorageSync('query_nick_name');
				this.query_dept_id = uni.getStorageSync('query_dept_id');

				let post_data = {
					deptId: this.query_dept_id,
					userName: this.query_user_name,
					khyf: this.search_mouse
				};
				// console.log(post_data)
				this.is_filter_nickname = false
				//  班组排名
		this.$api.getGrndzf(
				post_data	
				).then(res =>{
					console.log(res.data.data[0])
					
					if(res.data.data[0] == null){
						this.personal_score = 0
					}else{
						this.personal_score = res.data.data[0].zf
					}
					console.log(this.personal_score)
					//console.log(this.personal_score)
					// console.log(res)
				})
				//个人月度排名，个人月度分
				this.$api.getGrpm(post_data).then(res => {
					// console.log("个人月度排名")
					// console.log(res)
				this.mouth_score=res.data.data.bss;
				this.mouth_order = res.data.data.bzpms;
				});
				this.name = person.nick_name;
				//  班组排名
			

				this.$api
					.assessment({
						khyf: this.search_mouse,
						userName: this.query_user_name
					})
					.then(res => {
						this.list_summary = res.data.data;
						// console.log(this.list_summary);
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.status_bar {
		margin-top: calc(var(--status-bar-height) + 50upx);
	}

	page {
		background-color: $background-color-2;
	}

	.filter-search {
		width: 60px;
		text-align: center;
		
		
	}

	.profile-container {
		background-image: url(https://www.huaxins.cn/app_bg.png);
		// background-image: url("~@/static/image/kaohe-background.png");
		background-size: 100%;
		background-position: top center;
		background-repeat: no-repeat;
		background-color: $background-color-1;

		.filter {
			position: absolute;
			@extend .flex-between;
			padding: 20upx;
			padding-top: 320upx;
			width: calc(100%);

			.filter-date,
			.filter-class {
				background-color: $background-color-1;
				border: solid 1px #c1bcbc;
				border-radius: 30upx;
				display: block;
				position: absolute;
				margin: 0 20upx;
			}

			.filter-date {
				.current-date {
					padding: 10upx 20upx;
				}

				.filter-date-list {
					.filter-date-item {
						padding: 10upx 20upx;
						border-top: solid 1px #e5e5e5;
					}
				}
			}

			.filter-class {
				right: 20upx;

				.current-class {
					padding: 10upx 20upx;
					height: 60rpx;
					
				}

				.filter-class-list {
					z-index: 9;

					.filter-class-item {
						padding: 10upx 20upx;
						border-top: solid 1px #e5e5e5;
					}
				}
			}
		}

		.detail {
			.avatar {
				width: 30vw;
				margin: 0 auto;
				padding-top: 80px;

				image {
					width: 30vw;
					height: 30vw !important;
					@extend .image-radis;
					@extend .icon-image-size-full;
					border: solid 5px rgba(6, 0, 1, 0.2);
				}
			}

			.nickname {
				@extend .flex-between;
				justify-content: center;
				margin: 0 auto;
				margin-top: -5upx;

				text {
					font-size: $font-size-lg;
				}

				.medal-list {
					@extend .flex-between;
					margin-left: 10upx;

					.medal-item {
						margin-top: 14upx;

						image {
							@extend .icon-image-size;
						}
					}
				}
			}

			.total-list {
				@extend .flex-between;
				padding: 10upx;
				border-bottom: solid 1px #e5e5e5;

				.total-item {
					border-left: solid 1px #e5e5e5;
					padding: 3upx 10upx;
					margin: 10upx 0;
					padding-left: 15upx;

					.tital {
						font-size: $font-size-line;
					}

					.number {
						margin-top: 10upx;
						text-align: center;

						text {
							font-size: $uni-font-size-base;
							margin-left: 10upx;
							color: #8e8e8e;
						}

						text:first-child {
							font-size: $font-size-lg;
							margin-left: 0;
						}
					}

					&:first-child {
						// border-left: solid 1px #FFFFFF;
						border: none;
					}
				}

				.order-number .number text:first-child {
					color: #b23636;
				}

				.year-score .number text:first-child {
					color: #5cbcff;
				}

				.month-score .number text:first-child {
					color: #4c4c4c;
				}

				.month-order-number .number text:first-child {
					color: #20a719;
				}
			}
		}
	}

	.month-detail {
		@extend .container-1;
		background-color: $background-color-1;
		padding: 30upx 10upx;

		.month-title {
			color: #4c4c4c;
			font-size: $font-size-lg;
			text-align: center;
		}

		.month-title-c {
			width: 280upx;
			margin: 0 auto;
			margin-top: -10px;

			image {
				@extend .icon-image-size-full;
			}
		}

		.detail-list {
			margin-top: 20upx;

			.detail-item {
				padding: 0 15upx;

				.detail-title {
					@extend .flex-between;
					color: #b23636;
					font-size: $font-size-title;
					background-image: url(../../static/image/kaohe-p-c.png);
					background-repeat: repeat-x;
					background-position: left center;
					padding: 10upx 0;
					font-size: 35upx;

					text {
						padding: 0 8rpx;
						background-color: #fff;
					}

					text:first-child {}
				}

				.detail-content-list {
					color: #4c4c4c;
					font-size: $uni-font-size-sm;
					// height: 37upx;
					overflow-x: hidden;
					overflow-y: scroll;
					margin-right: 10upx;

					.detail-content-item {
						@extend .flex-between;
						background-image: url(../../static/image/kaohe-list-detail-c.png);
						background-repeat: repeat-x;
						background-position: left center;
						margin-left: 20upx;
						font-size: 30upx;
						height: 50upx;
						line-height: 50upx;
						overflow-y: hidden;

						text {
							padding: 0 0 0 20upx;
							background-color: #fff;
							line-height: 36upx;
							color: rgba(0, 0, 0, 0.6);
						}

						text:first-child {
							background-image: url(../../static/image/kaohe-list-c.png);
							background-position: 0 center;
							background-repeat: repeat-y;
							padding-left: 25upx;
						}
					}
				}
			}
		}

		.more {
			width: 50upx;
			height: 50upx;
			margin: 0 auto;
			margin-top: 10upx;

			image {
				@extend .icon-image-size-full;
			}
		}
	}

	.kaohe-list {
		background-color: $background-color-1;
		// @extend .container-2;
		margin: 0;
		border-bottom: solid 1px rgba(0, 0, 0, 0.2);

		.kaohe-filter-list {
			@extend .flex-between;
		}
	}

	.kaohe-detail {
		min-height: 600px;
		padding-bottom: 20upx;
		padding-top: 10upx;
		background-color: #fff;

		.kaohe-detail-item {
			margin: 0;
			padding: 0 30upx;
			padding-top: 10upx;
			padding-bottom: 10upx;
			// border-radius: 10upx;
			background-color: $background-color-1;
			// box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
			// border: solid 1px rgba(0,0,0,.3);
			border-bottom: solid 2px #eeeeee;
			min-height: 300upx;

			.kaohe-detail-title {
				@extend .flex-between;
				border-bottom: solid 1px #f6f6f6;
				padding: 15upx 10upx;

				.class_name {
					font-weight: bold;
					font-size: $uni-font-size-base;
				}

				.nickname {
					margin-left: 8upx;
					font-size: $uni-font-size-sm;
				}

				.datetime {
					color: $uni-text-color-grey;
					margin-left: 15upx;
					font-size: $uni-font-size-sm;
				}
			}

			.kaohe-detail-content {
				padding: 10upx;
				padding-bottom: 10upx;
				color: $uni-text-color;
			}
		}
	}

	.kaohe-date {
		float: right;
		// font-size: 30rpx;
		// font-size: $font-size-sm;
		color: rgba(0, 0, 0, 0.6);
	}

	.search-list {
		max-height: 200px;
		overflow-y: scroll;

		text {
			border-top: solid 1px rgba(0, 0, 0, 0.1);
			display: block;
			padding: 20upx;
			text-align: center;
		}
	}
</style>